<template>
  <div class="table-container">
    <el-table
    v-loading="listLoading"
    :data="tableData"
    style="width: 100%"
    highlight-current-row>
    <el-table-column
      prop="title"
      :label="$t('production.productionName')">
    </el-table-column>
    <el-table-column
      prop="updated_at"
      :label="$t('production.updateDate')">
    </el-table-column>
    <el-table-column
      prop="author"
      :label="$t('production.author')">
    </el-table-column>
    <el-table-column
      prop="phoneNumber"
      :label="$t('production.phoneNumber')">
    </el-table-column>
    <el-table-column
      :label="$t('production.operation')">
      <template slot-scope="scope">
        <el-button @click="checkProduct(scope.row)" type="text" size="small">{{$t('production.check')}}</el-button>
        <el-button @click="editProduct(scope.row)" type="text" size="small">{{$t('production.edit')}}</el-button>
        <el-button @click="unShelveConfirm(scope.row)" type="text" size="small">{{$t('production.unShelve')}}</el-button>
        <el-button @click="deleteConfirm(scope.row)" type="text" size="small">{{$t('production.remove')}}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page-container">
    <el-pagination v-show="total>0" :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
  </div>
  <!-- <el-dialog
    :title="$t('production.removeProductConfirmTitle')"
    :visible.sync="deleteDialogVisible"
    width="30%"
    :before-close="deleteDialogClose">
    <span>{{$t('production.removeProductConfirmContent')}}</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="deleteDialogClose()">{{$t('cancel')}}</el-button>
      <el-button type="primary" @click="deleteProductById(editingRow.id)">{{$t('confirm')}}</el-button>
    </span>
  </el-dialog>
  <el-dialog
    :title="$t('production.unShelveProductConfirmTitle')"
    :visible.sync="unShelveDialogVisible"
    width="30%"
    :before-close="unShelveDialogClose">
    <span>{{$t('production.unShelveProductConfirmContent')}}</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="unShelveDialogClose()">{{$t('cancel')}}</el-button>
      <el-button type="primary" @click="unShelveProductById(editingRow.id)">{{$t('confirm')}}</el-button>
    </span>
  </el-dialog> -->
  </div>
</template>

<script>
export default {
  name: "ProductionTable",
  props: {
    tableData: {
      type: Array,
      required: true
    },
    // tableData's total count
    total: {
      type: Number,
      required: true
    },
    listLoading: {
      type: Boolean,
      required: true
    },
    // 表示当前数据是否银行产品
    isBankProduct: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      // data query condition
      listQuery: {
        page: 1,
        limit: 10
      },
      deleteDialogVisible: false,
      unShelveDialogVisible: false,
      editingRow: undefined,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.emitSearchEvent()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.emitSearchEvent()
    },
    emitSearchEvent() {
      this.$emit("update:search", {
        ...this.listQuery
      })
    },
    deleteConfirm(row) {
      // this.deleteDialogVisible = true;
      // this.editingRow = row;
      this.$confirm(this.$t('production.removeProductConfirmContent'), this.$t('production.removeProductConfirmTitle'), {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          this.deleteById([row.product_id])
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    /**
     * 根据id删除用户
     */
    deleteById(ids) {
      let promise
      if (this.isBankProduct) {
        promise = this.$store.dispatch('deleteBankProductByIds', { product_ids: ids })
      } else {
        promise = this.$store.dispatch('deleteFastProductByIds', { product_ids: ids })
      }

      if (promise) {
        promise.then(data => {
          if (data && data['code'] === 0) {
            this.$notify({
              title: this.$t('operationSuccess'),
              message: data['msg'],
              type: 'success'
            })
          } else {
            this.$notify({
              title: this.$t('operationFailed'),
              message: data['msg'],
              type: 'warning'
            })
          }

          // 发射search事件，刷新列表
          this.emitSearchEvent()
        }).catch(error => {
          console.error('delete product by ids has error:', error)
          this.$notify.error({
            title: this.$t('operationFailed'),
            message: this.$t('errorTips'),
          })
        })
      }        
    },
    unShelveConfirm(row) {
      // this.unShelveDialogVisible = true;
      // // this.deleteProductById(row.id)
      // this.editingRow = row;
      this.$confirm(this.$t('production.unShelveProductConfirmContent'), this.$t('production.unShelveProductConfirmTitle'), {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '下架成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架'
          });          
        });
    },
    unShelveProductById(id) {
      this.$message({
        message: `下架成功，id = ${id}`,
        type: "success"
      });
      this.unShelveDialogVisible = false;
      this.cleanEditingRow();
    },
    unShelveDialogClose() {
      this.unShelveDialogVisible = false;
      this.cleanEditingRow();
    },
    cleanEditingRow() {
      this.editingRow = undefined;
    },
    checkProduct(row) {
      const query = {}
      if (this.isBankProduct) {
        query.bankProductId = row.product_id
      } else {
        query.fastProductId = row.product_id
      }
      this.$router.push({ path:'/production/productDetail', query })
    },
    editProduct(row) {
      const query = {}
      if (this.isBankProduct) {
        query.bankProductId = row.product_id
      } else {
        query.fastProductId = row.product_id
      }
      this.$router.push({ path:'/production/editProduct', query })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.table-container {
  .page-container {
    padding-top: 15px;
  }
}
</style>

